<template>
    <div>
        <h1>显示页面</h1>
        <a href="/add">新增页面</a>
    </div>
    <table class="table">
        <thead>
            <tr>
                <td>id</td>
                <td>编号</td>
                <td>图片</td>
                <td>姓名</td>
                <td>密码</td>
                <td>生日</td>
                <td>年龄</td>
                <td>性别</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
                <tr v-for="d in data">
                    <td>{{d.Id}}</td>
                    <td>{{d.Bh}}</td>
                    <td><img :src="axios.defaults.baseURL+d.Img" style="width: 60px;"></td>
                    <td>{{d.Name}}</td>
                    <td>{{d.Password}}</td>
                    <td>{{d.BirthDay}}</td>
                    <td>{{d.Age}}</td>
                    <td>{{d.Sex==1?"男":"女"}}</td>
                    <td>{{d.StateName}}</td>
                    <td>
                        <input type="button" value="修改" @click="update(d.Id)">
                        <input type="button" value="逻辑删除" @click="del(d.Id)" v-if="d.IsDelete==false">
                    </td>
                </tr>
        </tbody>
    </table>
    一共{{countdata.pagecount}}页,一页显示{{pagedata.pagesize}}条数据,一共{{countdata.pagecount}}条数据,当前第{{pagedata.pageindex}}页
    <input type="button" @click="pageindex(1)" value="首页">
    <input type="button" @click="pageindex(2)" value="上一页">
    <input type="button" @click="pageindexs(1)" value="1">
    <input type="button" @click="pageindexs(2)" value="2">
    <input type="button" @click="pageindexs(3)" value="3">
    <input type="button" @click="pageindex(3)" value="下一页">
    <input type="button" @click="pageindex(4)" value="尾页">
    <select v-model="pagedata.pagesize" @click="pagesizes">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </select>
    <input type="number"v-model="pagedata.pageindex" style="width: 50px;"> <input type="button" value="跳转" @click="skipindex"> 
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(() => {
    show();
})
const del=(mid:number)=>{
    axios.get("/api/Member/DeleteMember",{params:{Id:mid}}).then(res=>{
        if(res.data>0)
        {
            alert('修改成功');
            show();
        }
        else
        {
            alert('修改失败')
            show();
        }
    })
}
const update=(mid:number)=>{
    alert(mid);
    router.push({path:'/update',query:{Id:mid}})
}
const skipindex=()=>{
    show();
}
const pagesizes=()=>{
    show();
}
const pageindexs=(val:number)=>{
    if(val==1)
    {
        pagedata.value.pageindex=1
        show();
    }
    if(val==2)
    {
        pagedata.value.pageindex=2
        show();
    }
    if(val==3)
    {
        pagedata.value.pageindex=3;
        show();
    }
}
const pageindex=(val:number)=>{
    if(val==1)
    {
        pagedata.value.pageindex=1
        show();
    }
    if(val==2 && pagedata.value.pageindex>1)
    {
        pagedata.value.pageindex--
        show();
    }
    if(val==3 && pagedata.value.pageindex<countdata.value.pagecount)
    {
        pagedata.value.pageindex++;
        show();
    }
    if(val==4)
    {
        pagedata.value.pageindex=countdata.value.count;
        show();
    }
}
const data=ref([{
    "Id": 0,
      "Bh": "",
      "Name": "",
      "Password": "",
      "BirthDay": "",
      "Img": "string",
      "Age": 0,
      "sid": 0,
      "Sex": 0,
      "IsDelete": true,
      "StateName": ""
}])
const pagedata=ref({
    pageindex:1,
    pagesize:3
})
const countdata=ref({
    count:0,
    pagecount:0
})
const show=()=>{
    axios.get("/api/Member/MemberShow",{params:pagedata.value}).then(res=>{
        data.value=res.data.Members
        countdata.value.count=res.data.Count
        countdata.value.pagecount=Math.ceil(countdata.value.count/pagedata.value.pagesize)
    })
}












</script>

<style scoped>

</style>